<!--  -->
<template>
    <div class="common-layout">
            <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                :ellipsis="false"
                @select="handleSelect"
            >
                <el-menu-item index="0"  @click="home">
                <img
                    style="width: 100px"
                    src="../assets/img/fly.png"
                    alt="Element logo"
                />
                </el-menu-item>
                <div class="nav-title">
                    <p>CRM管理系统</p>
                </div>
                <el-menu-item index="1" @click="home">首页</el-menu-item>
                <el-menu-item index="1" @click="data_show">数据展示</el-menu-item>
                <el-sub-menu index="2">
                    <template #title>个人中心</template>
                    <el-menu-item index="2-1" @click="exit">退出登录</el-menu-item>
                </el-sub-menu>
            </el-menu>            
           
        <el-container>
            <el-row class="tac">
                <el-col :span="24">
                <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                >

                    <el-sub-menu index="1">
                    <template #title>
                        <el-icon><location /></el-icon>
                        <span>信息管理</span>
                    </template>
                    <div>
                        <el-menu-item index="1-1" @click="Cust_manage">客户管理</el-menu-item>
                        <el-menu-item index="1-2" @click="Staff_manage">人员管理</el-menu-item>
                    </div>
                    </el-sub-menu>
                    <el-menu-item index="2" @click="Bus_manage">
                    <el-icon><icon-menu /></el-icon>
                    <span>业务</span>
                    </el-menu-item>
                    <el-menu-item index="3" @click="wo_manage">
                    <el-icon><document /></el-icon>
                    <span>工单</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                    <el-icon><setting /></el-icon>
                    <span>设置</span>
                    </el-menu-item>
                </el-menu>
                </el-col>
            </el-row>

            <!-- 局部跳转 -->
            <router-view></router-view>
            <!-- 局部跳转 -->

        </el-container>
    </div>
</template>


<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

import { ref, reactive, getCurrentInstance, nextTick } from "vue";
import axios from "axios";
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();

// 跳转首页
const home = async() => {
    router.push('/home');
}
// 
const data_show = async() => {
    router.push('/data_show');
}
// 跳转客户管理
const Cust_manage = async() => {
    router.push('/cm');
}
// 跳转员工管理
const Staff_manage = async() =>{
    router.push("/st")
}
// 跳转业务管理
const Bus_manage = async() =>{
    router.push('/bs')
}
// 跳转工单
const wo_manage = async() =>{
    router.push('/wo')
}
// 跳转退出
const exit = async() =>{
    router.push("/");
    ElMessage.success("成功退出");
}

const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped>

    .nav-title>p{
        margin-top: 20px;
        font-size: 25px;
    }
    .el-menu--horizontal > .el-menu-item+div {
        width:100px;
        white-space: nowrap;
        margin-right: 55%;
    }
    .common-layout>ul {
        height: 80px;
    }
    .el-menu el-menu--horizontal el-menu-demo{
        min-width: 1588px;
    }
    .main_container{
        min-width: 80%;
    };
    .el-table__inner-wrapper{
        min-width: 1000px;
    }
</style>
